// Vue的插件注册机制 Vue.use  install 函数
import XtxSkeleton from '@/components/skeleton/index.vue'
import XtxCarousel from '@/components/carousel/index.vue'
import XtxMore from '@/components/more/index.vue'
import XtxBread from '@/components/bread/index.vue'
import XtxBreadItem from '@/components/bread/item.vue'
import XtxCity from '@/components/city/index.vue'
import XtxNumbox from '@/components/numbox/index.vue'
import XtxButton from '@/components/button/index.vue'
import XtxCheckbox from '@/components/checkbox/index.vue'
import XtxMessage from '@/components/message/message.vue'
import XtxDialog from '@/components/dialog/index.vue'
import XtxSwitch from '@/components/switch/index.vue'
import XtxTabs from '@/components/tabs/index.vue'
import XtxTabsPane from '@/components/tabs/pane.vue'
import { App } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/200.png'
export default {
  // app是vue实例 :App是实例的类型 这个类型是vue提供好的类型 
  install(app: App) {
    app.component(XtxSkeleton.name, XtxSkeleton)
    app.component(XtxCarousel.name, XtxCarousel)
    app.component(XtxMore.name, XtxMore)
    app.component(XtxBread.name, XtxBread)
    app.component(XtxBreadItem.name, XtxBreadItem)
    app.component(XtxCity.name, XtxCity)
    app.component(XtxNumbox.name, XtxNumbox)
    app.component(XtxButton.name, XtxButton)
    app.component(XtxCheckbox.name, XtxCheckbox)
    app.component(XtxMessage.name, XtxMessage)
    app.component(XtxDialog.name, XtxDialog)
    app.component(XtxSwitch.name, XtxSwitch)
    app.component(XtxTabs.name, XtxTabs)
    app.component(XtxTabs.name, XtxTabs)
    app.component(XtxTabsPane.name, XtxTabsPane)
    // 不仅可以注册全局组件, 也可以注册全局指令
    // app.directive(指令名, { mounted(){} })
    app.directive('lazy', {
      mounted(el, binding) {
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          if (isIntersecting) {
            el.src = binding.value
            // 处理图片加载失败后 设置默认图片
            el.onerror = () => {
              el.src = defaultImg
            }
            stop()
          }
        })
      }
    })
  }
}

// 怎么优化页面加载速度  页面白屏
// 1. 骨架屏: 占位
// 2. 图片懒加载 到了可视区再加载对应的图片的地址
// 3. 组件数据懒加载(延迟当前组件的内部发出的请求):滚动到可视区对应的请求才发出
// 4. 尽可能少的在复用的组件内发送请求
// 5. 图片压缩处理
// 6. 精灵图
// 7. 开启GZip压缩
// 8. 异步组件  代码压缩